<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=treemap-disk
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript" src="base.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};
        var option = {
                "title": {
                    "text": "Disk Usage",
                    "left": "center"
                },
                "tooltip": {
                    "formatter": "getFormatter()"
                },
                "series": [
                    {
                        "name": "Disk Usage",
                        "type": "treemap",
                        "visibleMin": 300,
                        "label": {
                            "show": "true",
                            "formatter": "getFormatter()"
                        },
                        "itemStyle": {
                            "borderColor": "#fff"
                        },
                        "levels": "getLevelOption()",
                        "data": [
                            {
                                "value": 99,
                                "name": "半导体",
                                "path": "10001",
                                "children": [
                                    {
                                        "value": 33,
                                        "name": "半导体1",
                                        "path": "Accounts/Access"
                                    },
                                    {
                                        "value": 2,
                                        "name": "半导体2",
                                        "path": "Accounts/Authentication"
                                    },
                                    {
                                        "value": 80,
                                        "name": "半导体3",
                                        "path": "Accounts/Notification"
                                    }
                                ]
                            },
                            {
                                "value": 15,
                                "name": "金融证券",
                                "path": "Accounts",
                                "children": [
                                    {
                                        "value": 76,
                                        "name": "国盛金控",
                                        "path": "Accounts/Access"
                                    },
                                    {
                                        "value": 92,
                                        "name": "东方财富",
                                        "path": "Accounts/Authentication"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            };

        function setData(optionPy) {
            // executeMethodInJson(optionPy);
            drawChart();
        }

        function drawChart() {
            myChart.setOption(option);
        }

        function getLevelOption() {
            return [
                {
                    itemStyle: {
                        borderWidth: 0,
                        gapWidth: 5
                    }
                },
                {
                    itemStyle: {
                        gapWidth: 1
                    }
                },
                {
                    colorSaturation: [0.35, 0.5],
                    itemStyle: {
                        gapWidth: 1,
                        borderColorSaturation: 0.6
                    }
                }
            ];
        }

        function getFormatter(info) {
            var value = info.value;
            var treePathInfo = info.treePathInfo;
            var treePath = [];
            for (var i = 1; i < treePathInfo.length; i++) {
                treePath.push(treePathInfo[i].name);
            }
            return [
                '<div class="tooltip-title">' +
                formatUtil.encodeHTML(treePath.join('/')) +
                '</div>',
                'Disk Usage: ' + formatUtil.addCommas(value) + ' KB'
            ].join('');
        }

        window.addEventListener('resize', myChart.resize);
    </script>
</body>

</html>